<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
		<style>
		body,html{
			width: 100%;
			height: 100%;
			margin: 0px;
		}
		#app{
			width: 400px;
			height:550px;
			box-shadow: 3px 3px 12px gray;
			position: absolute;
			margin-top:2%;
			margin-left: 30%;			
			border-radius: 6px;
		}
		#top h2{
			color: red;
			text-align: center;
		}
		#writeMsg input{
			width: 90%;
			height: 40px;
			line-height: 40px;
			font-size: 25px;
			border: 0px;
			/* 去掉聚焦时候的边框 */
			outline: none;
			
		}
		ul li{
			line-height: 30px;
		}
		#remove{
			float: right;
			margin-right: 20px;
			background-color: #FFFFFF;
			border: 0px;;
			
		}
		#bottom button{
			float: right;
			margin-right: 20px;
			background-color: #FFFFFF;
			border: 0px;;
		}
		
		</style>
	</head>
	<body>
		<div id="app">
			<div id="top">
				<h2>记事本</h2>
			</div>
			<div id="writeMsg">
				<input type="text" v-model="writeMsg" placeholder="请输入" @keydown.enter="addMsg()"/>
			</div>
			<div id="main">
				<ul>
					<li v-for="item,index in listdata">
					{{item}}
					<button id="remove" @click="removeMsg(index)">&times;</button>
					</li>
				</ul>
			</div>
			<div id="bottom" v-show="listdata.length!=0">
				<span style="margin-left: 20px;">共有{{listdata.length}}记录</span>
				<button @click="clearMsg()">清空</button>
			</div>		
		</div>
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			listdata:["吃饭饭","睡觉觉","打豆豆"],
			writeMsg:""
		},
		methods:{
			addMsg:function(){
				this.listdata.push(this.writeMsg)
				this.writeMsg=""
			},
			removeMsg:function(index){
				console.log(index)
				this.listdata.splice(index,1)
			},
			clearMsg:function(){
				this.listdata=[]
			}
			
			
		}
	})
	
	</script>
</html>
